<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 设置字符编码为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="icon" href="/img/favicon.png" type="image/png">

    <script src="libs/axios.min.js"></script>
    <script src="libs/vue.global.js"></script>
    <script src="libs/index.full.js"></script>
    <script src="libs/index.iife.js"></script>
    <script src="js/navbar.js"></script>
    <link rel="stylesheet" href="libs/index.css">
    <link rel="stylesheet" href="css/navbar.css">
    <link rel="stylesheet" href="css/user_profile.css">

</head>
<body>
<div id="app" class="full_container">
    <div id="navbar" class="navbar"></div>
    <div class="app_container--main">
        <!-- 上部信息卡片 -->
        <div class="profile-section">
            <img :src="securityForm.avatar" class="avatar" alt="头像">
            <div class="profile-info">
                <div class="nickname-gender">
                    <span class="nickname">{{securityForm.nickname}}</span>
                    <i class="el-icon el-icon-male gender-icon"></i>
                </div>
                <div class="profile-detail">积分：{{integral}}</div>
                <div class="profile-detail">地区：{{addressForm.region}}</div>
                <div class="profile-detail">收货地址：{{addressForm.detail}}</div>
            </div>
        </div>

        <!-- 中部状态图标 -->
        <div class="order-status-section">
            <div class="status-item">
                <img src="/img/待付款.png">
                <span>待付款</span>
            </div>
            <div class="status-item">
                <img src="/img/运输中.png">
                <span>已发货</span>
            </div>
            <div class="status-item">
                <img src="/img/未收货.png">
                <span>待签收</span>
            </div>
            <div class="status-item">
                <img src="/img/已收货.png">
                <span>已签收</span>
            </div>
        </div>

        <div class="features-section">
            <div class="feature-item" @click="showFavorites = true">
                <img src="/img/我的收藏.png">
                <span>我的收藏</span>
            </div>
            <div class="feature-item" @click="showPoints = true">
                <img src="/img/积分明细.png">
                <span>积分明细</span>
            </div>
            <div class="feature-item" @click="showAddress = true">
                <img src="/img/地址设置.png">
                <span>地址管理</span>
            </div>
            <div class="feature-item" @click="showSecurity = true">
                <img src="/img/账号设置.png">
                <span>安全设置</span>
            </div>
        </div>
        <!-- 我的收藏弹窗 -->
        <el-dialog v-model="showFavorites" title="我的收藏" width="600px">
            <el-tabs v-model="favoritesTab">
                <el-tab-pane label="收藏的贴文" name="posts">
                    <ul>
                        <li v-for="item in favoritePosts" :key="item.id">
                            <a :href="item.url" target="_blank">{{ item.title }}</a>
                        </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane label="收藏的资讯" name="news">
                    <ul>
                        <li v-for="item in favoriteNews" :key="item.id">
                            <a :href="item.url" target="_blank">{{ item.title }}</a>
                        </li>
                    </ul>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>

        <!-- 积分明细弹窗 -->
        <el-dialog v-model="showPoints" title="积分明细" width="600px">
            <el-table :data="pointsData" style="width: 100%" class="dialog-table">
                <el-table-column prop="createTime" label="日期" width="200"></el-table-column>
                <el-table-column prop="content" label="说明"></el-table-column>
                <el-table-column prop="pointsChange" label="积分" width="80"></el-table-column>
            </el-table>
        </el-dialog>

        <!-- 地址管理弹窗 -->
        <el-dialog v-model="showAddress" title="地址管理" width="500px">
            <el-form :model="addressForm">
                <el-form-item label="地区">
                    <el-input v-model="addressForm.region" />
                </el-form-item>
                <el-form-item label="收货地址">
                    <el-input v-model="addressForm.detail" />
                </el-form-item>
                <el-button type="primary" @click="saveAddress">保存</el-button>
            </el-form>
        </el-dialog>

        <!-- 安全设置弹窗 -->
        <el-dialog v-model="showSecurity" title="安全设置" width="500px">
            <el-form :model="securityForm">
                <el-form-item label="昵称">
                    <el-input v-model="securityForm.nickname" />
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="securityForm.password" type="password" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="securityForm.sex" />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="securityForm.email"  />
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="securityForm.phone" />
                </el-form-item>
                <!-- 上传头像 -->
                <el-form-item label="头像">
                    <el-upload
                            class="avatar-uploader"
                            action="/notice/upload"
                    :show-file-list="false"
                    :on-success="handleFileChange"
                    :before-upload="beforeUpload"
                    >
                    <img v-if="securityForm.avatar" :src="securityForm.avatar" class="upload-avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-button type="primary" @click="saveSecurity">保存</el-button>
            </el-form>
        </el-dialog>
        <div class="health-tip-section">
            <h3>🌿 今日养生小贴士</h3>
            <p>今日宜养肝，推荐多食绿叶蔬菜，保持良好作息，避免熬夜。</p>
        </div>
    </div>
</div>


</body>
<script>
    const {createApp} = Vue;

    const {ElMessage} = ElementPlus;

    const app = createApp({
        data(){
            return{
                showFavorites: false,
                showPoints: false,
                showAddress: false,
                showSecurity: false,
                integral:0,
                favoritesTab: "posts",
                favoritePosts: [
                ],
                favoriteNews: [
                ],
                pointsData: [
                ],
                addressForm: {
                    id:0,
                    region: "",
                    detail: ""
                },
                securityForm: {
                    id:0,
                    nickname: "",
                    password: "",
                    email:"",
                    phone:"",
                    sex:"",
                    avatar:""
                },
                currentUserId: 0,

            }
        },
        mounted() {
            this.getCurrentUser();
        },
        methods: {
            getCurrentUser() {
                axios.get('http://localhost:8080/chat/currentUser')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.currentUserId = response.data.data.id;
                            console.log(this.currentUserId);
                            this.getData(); // 在这里调用
                        } else {
                            console.warn("未登录，跳转到登录页");
                            window.location.href = "/login.html"; // 重定向到登录页
                        }
                    })
                    .catch(error => console.error("获取当前用户失败:", error));
            },
            getData(){
                let id = this.currentUserId;
                axios.get(`http://localhost:8080/user/${id}`)
                    .then(response => {
                        if(response.data.code === 200){
                             this.securityForm = response.data.data;
                             this.addressForm  = response.data.data;
                        }
                    })
                    .catch(error => {
                        console.error('获取个人信息失败', error);
                    });
                axios.get(`http://localhost:8080/userProfile/${id}`)
                    .then(response => {
                        if(response.data.code === 200){
                            this.integral = response.data.data.integral;
                        }
                    })
                    .catch(error => {
                        console.error('获取个人信息失败', error);
                    });
                axios.get(`http://localhost:8080/favorites/articles/${id}`)
                    .then(response => {
                        if(response.data.code === 200){
                            this.favoriteNews = response.data.data;
                        }
                    })
                    .catch(error => {
                        console.error('获取收藏文章', error);
                    });
                axios.get(`http://localhost:8080/favorites/posts/${id}`)
                    .then(response => {
                        if(response.data.code === 200){
                            this.favoritePosts = response.data.data;
                        }
                    })
                    .catch(error => {
                        console.error('获取收藏帖子失败', error);
                    });
                axios.get(`http://localhost:8080/pointsRecords/getList`)
                    .then(response => {
                        if(response.data.code === 200){
                            this.pointsData = response.data.data;
                        }
                    })
                    .catch(error => {
                        console.error('获取积分明细失败', error);
                    });
            },
            saveAddress() {
                let addressForm = this.addressForm;
                axios.put(`http://localhost:8080/user`, addressForm)
                    .then(response => {
                        if(response.data.code === 200){
                            ElMessage.success("收货地址已更新")
                            this.showAddress = false;
                        }
                    })
                    .catch(error => {
                        console.error('收货地址更新失败', error);
                    });
            },
            saveSecurity() {
                let securityForm = this.securityForm;
                axios.put(`http://localhost:8080/user`, securityForm)
                    .then(response => {
                        if(response.data.code === 200){
                            ElMessage.success("个人信息已更新")
                            this.showSecurity = false;
                        }
                    })
                    .catch(error => {
                        console.error('个人信息更新失败', error);
                    });

            },
            // 上传前的校验
            beforeUpload(file) {
                const isImage = file.type.startsWith("image/");
                if (!isImage) {
                    this.$message.error("只能上传图片文件！");
                }
                return isImage;
            },

            // 处理上传文件变更
            handleFileChange(file, fileList) {
                debugger
                if (file && file.path) {
                    this.securityForm.avatar = file.path;
                    this.$message.success("头像上传成功！");
                } else {
                    // 上传失败时可以选择不变或清空
                    console.warn("图片上传失败或未返回路径");
                }

            },
        }
    })
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
    }
    app.use(ElementPlus).mount("#app");
</script>
</html>